<template>
  <div class="jiagezhuizong">
    <div
      class="samlldiv"
      :class="[activenum ? 'animate__animated  animate__fadeInDown' : '']"
      v-if="active"
    >
      <Jgzzdialogtop />
    </div>
    <div class="samlldiv animate__animated animate__fadeInUp" v-else>
      <Jgzzdialogbottom />
    </div>

    <div
      v-if="active"
      class="bottonshuzipopupdown"
      @click="qiehuan(0)"
      id="shuzijiaoyipopupbottomdown"
    >
      <img src="../assets/shuzijiaoyipopupbottomdown.png" style="width: 1.5rem;height: 1.2rem;"/>
    </div>
    <div
      v-else
      class="bottonshuzipopuptop"
      @click="qiehuan(1)"
      id="shuzijiaoyipopupbottomup"
    >
      <img src="../assets/shuzijiaoyipopupbottomup.png" style="width: 1.5rem;height: 1.2rem;"/>
    </div>
    <!-- <div class="samlldiv">
      <div style="position: relative; height: 100%">
        <div class="mainContent">
          <div
            class="maindivcontent"
            style="overflow: hidden; scroll-behavior: smooth"
          >
            <div
              style="width: 100%; height: 100%; position: relative"
              class="page1"
              :class="currentPage == 2 ? 'transition-t' : 'transition-b'"
            >
               
            </div>
            <div
              :class="currentPage == 2 ? 'transition-t' : 'transition-b'"
              style="width: 100%; height: 100%; position: relative"
              class="page2"
            >
             <Jgzzdialogbottom />
            </div>
            <div class="switch-jg" id="jgzzdowm1" @click="switchPages">
              <img
                :src="
                  currentPage == 1
                    ? require('@/assets/shuzijiaoyipopupbottomdown.png')
                    : require('@/assets/shuzijiaoyipopupbottomup.png')
                "
              />
            </div>
          </div>
        </div>
      </div>
    </div>  -->
  </div>
</template>

<script>
import APIS from "@/api/index";
import { Message } from "element-ui";
import * as echarts from "echarts";
import Dialog from "@/components/dialog.vue";
import Jgzzdialogtop from "@/components/jgzzdialogtop_1.vue";
import Jgzzdialogbottom from "@/components/jgzzdialogbottom_1.vue";
export default {
  props: {},
  components: { Dialog, Jgzzdialogtop, Jgzzdialogbottom },
  data() {
    return {
      currentPage: 1, //当前页
      active: true,
      activenum:0
    };
  },
  computed: {},
  mounted() {},
  methods: {
    qiehuan(index) {
      this.activenum++;
      if (index == 0) {
        this.active = false;
      } else {
        this.active = true;
      }
    },
    switchPages() {
      this.currentPage = this.currentPage == 1 ? 2 : 1;
    },
  },
};
</script>
// 这种引入确保样式只在该组件生效
<style src="@/assets/css/public.css" scoped></style>
<style lang="scss" scoped>
.jiagezhuizong {
  width: 98%;
  box-sizing: border-box;
  margin: 0 auto;
  height: 83vh;
  position: relative;
  scroll-behavior: smooth;
  overflow: hidden;
  font-size: 1rem;
}
// 水平位移动画
.transition-t {
  transform: translate(0, -100%);
  transition: all 1s;
}
.transition-b {
  transform: translate(0, 0);
  transition: all 1s;
}
</style>
